<template>
	<view class="hot">
		<view class="hot-cell" @click="handlePlay">
			<!-- <view class="cover-view" v-if="info.cover"> -->
				<image :src="info.cover" mode="aspectFill" class="cover" v-if="info.cover"></image>
			<!-- </view> -->
			<view class="hot-info">
				<view class="hot-title ellipsis-2">
					{{info.title}}
				</view>
				<view class="author">
					<!-- <text>作者：</text> -->
					<text>{{info.subtitle}}</text>
				</view>
				<view class="play-button">
					<image :src="playIconImage" mode="" class="play-icon"></image>
					<text>立即播放</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const playIconImage = ref("/static/images/index/bofang@3x.png")
	const props = defineProps(['info'])
	const emit = defineEmits(['select']);
	const info = reactive(props.info)
	const handlePlay = () => {
		emit('select')
	}
</script>

<style lang="scss" scoped>
	.hot {
		flex-shrink: 0;
		width: 560rpx;
		height: 300rpx;
		background: #EBF7F6;
		border-radius: 30rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		display: inline-block;
		// line-height: 300rpx;

		.hot-cell {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			.cover-view{
				width: 196rpx;
				height: 260rpx;
			}
			.cover {
				width: 196rpx;
				height: 260rpx;
				background-color: #F6F6F6;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}

			.hot-info {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: left;

				.hot-title {
					width: 288rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 40rpx;
				}

				.author {
					font-size: 24rpx;
					color: #939999;
					line-height: 24rpx;
					margin: 16rpx 0 28rpx 0;
				}

				.play-button {
					width: 208rpx;
					height: 68rpx;
					background: linear-gradient(315deg, #43D9F0 0%, #5CE5D5 100%);
					border-radius: 59rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.play-icon {
					width: 20rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}
			}
		}


	}
</style>